<template>
	<div style="margin:16px auto; max-width: 1200px; padding: 0 12px;">
		<a-card title="操作日志">
			<template #extra>
				<a-space>
					<a-input v-model:value="q" placeholder="按用户名/操作/方法筛选" style="width: 300px" />
					<a-select v-model:value="status" :options="statusOptions" allow-clear placeholder="状态" style="width: 140px" />
					<a-button type="primary" @click="load(1)">查询</a-button>
				</a-space>
			</template>
			<a-table :data-source="records" :columns="columns" row-key="id" :pagination="false">
				<template #bodyCell="{ column, record }">
					<template v-if="column.key==='status'">
						<a-tag :color="record.status === 1 ? 'green' : 'red'">{{ record.status === 1 ? '成功' : '失败' }}</a-tag>
					</template>
					<template v-else-if="column.key==='actions'">
						<a @click="openDetail(record)">详情</a>
					</template>
				</template>
			</a-table>
			<div style="display:flex; justify-content: flex-end; margin-top: 12px;">
				<a-pagination :current="pageNo" :page-size="pageSize" :total="total" @change="load" />
			</div>
		</a-card>

		<a-modal v-model:open="detailOpen" title="日志详情" :footer="null" width="800px">
			<a-descriptions bordered size="small" :column="1">
				<a-descriptions-item label="用户">{{ current?.username }} (ID: {{ current?.userId || '-' }})</a-descriptions-item>
				<a-descriptions-item label="操作">{{ current?.operation }}</a-descriptions-item>
				<a-descriptions-item label="方法">{{ current?.method }}</a-descriptions-item>
				<a-descriptions-item label="状态">{{ current?.status === 1 ? '成功' : '失败' }}</a-descriptions-item>
				<a-descriptions-item label="耗时(ms)">{{ current?.executeTime }}</a-descriptions-item>
				<a-descriptions-item label="时间">{{ current?.createTime }}</a-descriptions-item>
				<a-descriptions-item label="IP">{{ current?.ip }}</a-descriptions-item>
				<a-descriptions-item label="UA">{{ current?.userAgent }}</a-descriptions-item>
				<a-descriptions-item label="错误">{{ current?.errorMsg || '-' }}</a-descriptions-item>
				<a-descriptions-item label="参数">
					<pre style="white-space: pre-wrap;">{{ current?.params || '-' }}</pre>
				</a-descriptions-item>
			</a-descriptions>
		</a-modal>
	</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { pageOpLogs, type OperationLogVO } from '@/api/admin/modules/system'

const q = ref('')
const status = ref<number | undefined>(undefined)
const pageNo = ref(1)
const pageSize = ref(10)
const total = ref(0)
const records = ref<OperationLogVO[]>([])

const statusOptions = [
	{ label: '全部', value: undefined as any },
	{ label: '成功', value: 1 },
	{ label: '失败', value: 0 }
]

const columns = computed(() => [
	{ title: 'ID', dataIndex: 'id' },
	{ title: '用户名', dataIndex: 'username' },
	{ title: '操作', dataIndex: 'operation' },
	{ title: '方法', dataIndex: 'method' },
	{ title: '状态', key: 'status' },
	{ title: '耗时(ms)', dataIndex: 'executeTime' },
	{ title: '时间', dataIndex: 'createTime' },
	{ title: '操作', key: 'actions' }
])

async function load(p?: number) {
	if (p) pageNo.value = p
	const resp = await pageOpLogs(q.value || undefined, status.value, pageNo.value, pageSize.value)
	if ((resp as any).code === 0) {
		total.value = (resp as any).data.total
		records.value = (resp as any).data.records
	}
}

const detailOpen = ref(false)
const current = ref<OperationLogVO | null>(null)
function openDetail(row: OperationLogVO) {
	current.value = row
	detailOpen.value = true
}

load()
</script>




